<template>
	<div  class="app-container">

		<div class="filter-container">
				<el-button @click="add(0)" type="primary" class="filter-item">添加</el-button>
        <el-button @click="getRecords" type="danger" class="filter-item">刷新</el-button>
		</div>

		<el-table
			v-loading="listLoading"
			:data="list"
			style="width: 100%;margin-bottom: 20px;"
			row-key="id"
			border
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}">

			<el-table-column	prop="name"	label="名称" min-width="100px"></el-table-column>

			<el-table-column	prop="created_at"	label="创建时间" min-width="160px"></el-table-column>

			<el-table-column fixed="right" label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="add(scope.row.id)">添加</el-button>
					<el-button size="mini" type="text" @click="edit(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :title="isAdd?'添加':'编辑'" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="名称">
					<el-input v-model="form.name" ></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort" ></el-input>
				</el-form-item>

				<el-form-item v-if="isAdd" >
					<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
					<el-button>重置</el-button>
				</el-form-item>
				<el-form-item v-else >
					<el-button type="primary" @click="onSubmit('form')">修改</el-button>
				</el-form-item>

			</el-form>
		</el-dialog>



	</div>
</template>

<script>
import { myGet } from '@/utils/myUtils';


const urlLst = '/guard/shop/goods/classify/lst'
const urlAdd = '/guard/shop/goods/classify/add'
const urlDetail = '/guard/shop/goods/classify/detail'
const urlDel = '/guard/shop/goods/classify/del'

export default {

	data() {
		return {
			dialogFormVisible:false,
			isAdd:true,
			listLoading:true,
			list:[],
			form:{
				name:'',
				sort:0,
				pid:0
			}
		}
	},

	mounted() {
		this.getRecords()
	},

	methods: {
		getRecords(){
			myGet(urlLst).then(res=>{
				this.listLoading = false
				if(res.status){
						this.list = res.data.records
				}
			})
		},
		add(pid){
			Object.assign(this.form,this.$options.data().form)
			this.form.pid = pid
      if(pid === 0){
        this.form.id = 0;
      }
			this.dialogFormVisible = true
		},

		edit(id){
			myGet(urlDetail,{id}).then(res=>{
				if(res.status){
					Object.assign(this.$data.form,res.data.records[0])
					this.isAdd = false
					this.dialogFormVisible = true
				}
			})

		},
		onSubmit(){
			myGet(urlAdd,this.form).then(res=>{
				if(res.status){
					this.dialogFormVisible = false;
					this.$message.success(res.msg)
					this.getRecords()
				}
			})
		}


	},
};
</script>

<style  scoped>

</style>
